<template>
    <div class="knowledge-container">
      <el-input
        v-model="searchQuery"
        placeholder="搜索农业知识"
        @input="handleSearch"
      ></el-input>
  
      <el-tree
        :data="categories"
        :props="treeProps"
        @node-click="handleNodeClick"
      ></el-tree>
  
      <div class="article-list">
        <el-card v-for="article in filteredArticles" :key="article.id">
          <h3>{{ article.title }}</h3>
          <p>{{ article.summary }}</p>
        </el-card>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        searchQuery: '',
        categories: [],
        articles: [],
        treeProps: {
          label: 'name',
          children: 'children'
        }
      }
    },
    computed: {
      filteredArticles() {
        return this.articles.filter(article => 
          article.title.includes(this.searchQuery) ||
          article.content.includes(this.searchQuery)
        )
      }
    },
    async created() {
      const response = await axios.get('/api/knowledge')
      this.categories = response.data.categories
      this.articles = response.data.articles
    },
    methods: {
      handleNodeClick(node) {
        this.fetchCategoryArticles(node.id)
      },
      async fetchCategoryArticles(categoryId) {
        const response = await axios.get(`/api/knowledge/${categoryId}`)
        this.articles = response.data
      }
    }
  }
  </script>